<template>
	<view class="">
		<view class="container">
			<view class="serch-box">
				<image class="search-img" src="/static/message/search.png" mode=""></image>
				<input class="search-input" v-model="keyword" type="text" placeholder="请搜索的商品">
				<view class="search-btn" @click="init">搜索</view>
			</view>
			<view class="serch-content">
				<view class="serch-content-text">我的积分</view>
				<view class="serch-content-num">{{userInfo.score}}</view>
			</view>
		</view>
		<goodsList :list="goodList" :isJifen="2" :detailType="2"></goodsList>
	</view>

</template>

<script>
	import goodsList from '@/components/goods-list.vue'
	export default {
		components: {
			goodsList
		},
		data() {
			return {
				goodList: [], //商品列表
				keyword: '',
				userInfo: {}
			};
		},
		onLoad() {
			this.init(); //获取积分商品列表
		},
		methods: {
			//获取积分商品列表
			init() {
				this.$http('integral.getGoodsListByIntegral', {
					keyword: this.keyword
				}, '获取中...').then(res => {
					if (res.code == 1) {
						this.goodList = res.data.data
					}
				})
				this.$http('user.getuserdetails', {}, '获取中...').then(res => {
					if (res.code == 1) {
						console.log(res, 11)
						this.userInfo = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding: 20rpx;
		background-color: #F6F7F9;
	}

	.container {
		.serch-box {
			display: flex;
			justify-content: space-around;
			width: 686rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36px 36px 36px 36px;
			border: 2rpx solid #287E34;

			.search-img {
				width: 28rpx;
				height: 28rpx;
				margin: 25rpx 0 0 10rpx;
			}

			.search-input {
				width: 440rpx;
				height: 72rpx;
			}

			.search-btn {
				width: 138rpx;
				height: 60rpx;
				background: linear-gradient(93deg, #6FAD19 0%, #287E34 100%);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
				margin-top: 6rpx;
			}
		}

		.serch-content {
			width: 702rpx;
			height: 146rpx;
			background-image: url('');
			background-size: contain;
			background-repeat: no-repeat;
			margin-top: 20rpx;
			padding-top: 30rpx;

			.serch-content-text {
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				margin: 0 0 10rpx 30rpx;
			}

			.serch-content-num {
				font-weight: 800;
				font-size: 36rpx;
				color: #006633;
				margin-left: 30rpx;
			}
		}
	}
</style>